<template>
  <!-- 已经绑定的商机 -->
  <div class="page">
    <!-- search -->
    <div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
      <div
        class=""
        @click="popBack()"
      >
        <i
          class="iconfont icon-arrow-left"
          style="font-size: 16px;font-weight: bold;"
        ></i>
        <span style="font-size: 16px;">返回</span>
      </div>
    </div>
    <!-- base info -->
    <div style="padding: 12px;background-color: #FFFFFF;">
      <!-- row -->
      <div style="display: flex;">
        <van-image
          round
          :src="data.headUrl"
          width="44px"
          height="44px"
          mode=""
        />
        <div style="flex: 1;padding-left: 10px;">
          <div style="display: flex;justify-content: space-between;align-items: auto;">
            <div style="font-size: 14px;font-weight: bold;">
              {{viewdata.stuName}}({{viewdata.surname+viewdata.givenName}})</div>
            <div
              style="padding: 5px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 15px;"
              v-if="interDegreeName != null"
            >
              {{interDegreeName}}</div>
          </div>
          <div style="display: flex;">
            <div style="padding: 2px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;margin-right: 5px;">
              {{data.saleHeadCode != undefined ?"已绑定":"未绑定"}}</div>
            <div
              style="padding: 2px 12px;background-color: #FFFFFF;color: #FF0000;font-size: 12px;border-radius: 15px;border: 1px solid #FF0000;margin-right: 5px;"
              v-if="data.chnName != null"
            >
              {{data.chnName}}</div>
            <div style="padding: 2px 12px;color: #007AFF;font-size: 12px;border-radius: 15px;">
              {{viewdata.sex==1?'男':'女'}}</div>
          </div>
        </div>
      </div>
      <!-- row2 -->
      <div style="display: flex;margin-top: 12px;">
        <div
          @click="modifyHandle"
          style="padding: 2px 12px;cursor: pointer;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;"
        >
          修改</div>
        <div
          @click="loadAddFlowPage"
          style="padding: 2px 12px;cursor: pointer;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;"
        >
          填写跟进记录</div>
        <div
          @click="signOrderHandle"
          style="padding: 2px 12px;cursor: pointer;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;"
        >
          签单</div>
      </div>

      <!-- row3 -->
      <div style="display: flex;margin-top: 12px;justify-content: space-between;">
        <div style="font-size:12px;color:#999999;">上次跟进时间:2020年12月12日</div>
        <div style="font-size:12px;color:#999999;">距离下次</div>
      </div>
    </div>

    <!-- 课程意向 & 基本资料 & tab-->
    <div style="flex: 1;overflow-y: auto;display: flex;flex-direction: column;padding-bottom: 20px;">
      <!-- 意向课程 -->
      <div style="padding: 0 12px;background-color: #FFFFFF;padding-top: 5px;">
        <div style="font-size: 14px;color: #007AFF;font-weight: bold;background-color: #FFFFFF;">意向课程</div>
        <!-- row -->
        <div v-for="(course,idx) in courseData">
          <div
            style="display: flex;margin-top: 5px;"
            v-for="(obj,i) in course"
          >
            <span style="font-size: 12px;color: #999999;min-width: 90px;">{{obj.label}}</span>
            <span :style="{'font-size': '12px','color': obj.link?'#007AFF':'#333333','margin-left': '12px'}">{{obj.value}}</span>
            <span
              :style="{'font-size': '12px','color':'#007AFF','margin-left': '12px','cursor': 'pointer'}"
              v-if="obj.btn != undefined"
            >{{obj.btn}}</span>
          </div>
        </div>
      </div>

      <expand-data-cell
        title="基本资料"
        :items="baseInfo"
      />
      <!-- tabbar -->
      <!--
      <div>
        <div style="padding: 0 12px;display: flex;	white-space: nowrap;overflow: hidden;background-color: #FFFFFF;">
          <div
            @click="tabClick(idx)"
            style="color: #333333;padding: 5px 0;text-align: center;flex: 1;"
            v-for="(obj,idx) in tabs"
            :key="idx"
          >
            <div :style="{
                  'font-size': '14px','text-align':'center', 'font-weight':idx==tabindex?'bold':'normal', 'color'
              :idx==tabindex?'#007AFF':'#222222'}">{{obj}}</div>
            <div
              style="height: 2px;margin-top: 5px;background-color: #007AFF;"
              v-if="idx == tabindex"
            >
            </div>
          </div>
        </div>
      </div>
    -->

      <!-- body -->
      <div>
        <detailinfo :data="viewdata" />
        <!-- <detailinfo v-if="tabindex == 0" :data="viewdata"/> -->
        <!-- <chatrecourd v-if="tabindex == 1" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import detailinfo from "./personinfo-hasbindbusiness-detailinfo";
import chatrecourd from "./personinfo-hasbindbusiness-chatrecourd";
export default {
  props: ["data"],
  components: {
    detailinfo,
    chatrecourd,
    "expand-data-cell": () =>
      import("@/components/expand-data-cell/expand-data-cell.vue"),
  },
  data() {
    return {
      tabindex: 0,
      //   tabs: ["详细资料", "沟通记录"],
      tabs: ["详细资料"],
      baseInfo: [],
      detailData: [],
      courseData: [],
      viewdata: {},
      interDegreeName: null,
    };
  },
  created() {
    this.data.interDegree = 1;

    this.viewdata = this.data;
  },
  mounted() {
    let arr = [];
    arr = global.dictList;
    let info = [];
    for (const obj of arr) {
      if (obj.code == "gjjd") {
        //跟进进度
        info.push({ value: obj.value, name: obj.label });
      }
    }
    let obj = info.find((e) => {
      if (parseInt(e.value) == this.data.interDegree) {
        return e;
      }
    });
    this.interDegreeName = obj.name;
    this.setupUI(this.viewdata);
  },
  methods: {
    tabClick(idx) {
      this.tabindex = idx;
    },
    popBack() {
      this.$router.back({});
    },
    modifyHandle() {
      global.modify = true;
      this.$router.push({
        name: "bindasbusiness",
        params: this.data,
      });
    },
    loadAddFlowPage() {
      this.$router.push({
        path: "/personinfo-add-flowup",
        query: {
          id: this.data.id,
        },
      });
    },
    signOrderHandle() {
      this.$router.push({
        path: "/personinfo-checkorder",
      });
    },
    setupUI(data) {
      // course
      let json = data["purpose"] ?? "[]";
      let arr = JSON.parse(json);
      if (arr.length > 0) {
        for (let obj of arr) {
          let course = [
            { label: "意向课程", link: true, value: obj["course"] },
            { label: "意向学校", value: obj["school"] },
            {
              label: "课程认证状态",
              btn: "更改状态>",
              value: obj["authStatus"],
            },
            { label: "失败原因", value: obj["failCause"] },
            { label: "认证截图地址", value: obj["authUrl"] },
          ];
          this.courseData.push(course);
        }
      }
      // baseInfo
      this.baseInfo = [
        { label: "中文姓名", value: data["stuName"] },
        { label: "渠道来源", value: data["chnSource"] },
        { label: "销售负责人", value: data["saleHead"] },
        { label: "ASD负责人", value: data["asdHead"] },
        { label: "市场负责人", value: data["actHead"] },
      ];
    },
  },
};
</script>

<style scoped>
.page {
  flex: 1;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
</style>